var mySwiper1 = new Swiper('#swiper-container1', {
    autoplay: 5000,
    loop: true,
    pagination : '.swiper-pagination',
    paginationClickable :true,
    autoplayDisableOnInteraction: false
});
var mySwiper2 = new Swiper('#swiper-container2', {
    watchSlidesProgress : true,
    watchSlidesVisibility : true,
    slidesPerView : 5,
    onTap: function(){
        mySwiper3.slideTo( mySwiper2.clickedIndex)
    }
});
var mySwiper3 = new Swiper('#swiper-container3', {
    pagination : '.major-slide',
    paginationClickable :true,
    onSlideChangeStart: function(){
        updateNavPosition('swiper-container2', mySwiper2, mySwiper3);
    }
});
var mySwiper4 = new Swiper('#swiper-container4', {
    watchSlidesProgress : true,
    watchSlidesVisibility : true,
    slidesPerView : 4,
    onTap: function(){
        mySwiper5.slideTo( mySwiper4.clickedIndex)
    }
});
var mySwiper5 = new Swiper('#swiper-container5', {
    onSlideChangeStart: function(){
        updateNavPosition('swiper-container4', mySwiper4, mySwiper5);
    }
});
function updateNavPosition (navId, navModel, conModel) {
    $('#'+ navId +' .active-nav').removeClass('active-nav');
    var activeNav = $('#'+ navId +' .swiper-slide').eq(conModel.activeIndex).addClass('active-nav');
    if (!activeNav.hasClass('swiper-slide-visible')) {
        if (activeNav.index()>navModel.activeIndex) {
            var thumbsPerNav = Math.floor(navModel.width/activeNav.width())-1;
            navModel.slideTo(activeNav.index()-thumbsPerNav);
        }
        else {
            navModel.slideTo(activeNav.index());
        }
    }
}
